<template lang="pug">
  .table-container
    el-table(
      v-loading='listLoading'
      :data='caselist'
      stripe
      height="660"
      highlight-current-row=''
      @sort-change="sortChange")
      el-table-column(width='260px' align='left' label='案件名称')
        template(slot-scope='{row}')
          router-link.link-type(:to="'/cases/detail?id='+row.id")
            span {{ row.caseName }}
      el-table-column(width='220px' align='left' label='案件编号')
        template(slot-scope='{row}')
          span {{ row.caseNo }}
      el-table-column(width='120px' align='left' label='创建人')
        template(slot-scope='{row}')
          span {{ row.creator }}
      el-table-column(width='180px' align='left' label='创建时间')
        template(slot-scope='{row}')
          span {{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
      el-table-column(min-width='100px' label='案件类型')
        template(slot-scope='{row}')
          router-link.link-type(:to="'/example/edit/'+row.id")
            span {{ row.caseType }}
      el-table-column(align='left' label='操作' width='120')
        template(slot-scope='{row}')
          router-link(:to="'/example/edit/'+row.id")
            el-button(type='primary' size='small' icon='el-icon-edit')
              | Edit
    pagination(v-show='total>0' :total='total' :page.sync='listQuery.page' :limit.sync='listQuery.pageSize' @pagination='getCaseList')
</template>

<script>
import Pagination from '@/components/Pagination'
import ElDragSelect from '@/components/DragSelect' // base on element-ui
import { fetchList } from '@/api/cases'

const moment = require('moment')

const caseTypeOptions = [
  { key: 'EC', display_name: '电子商务' },
  { key: 'SA', display_name: '规范促销' },
  { key: 'ES', display_name: '网络交易' },
  { key: 'FS', display_name: '食品安全' }
]
const caseTypeKeyValue = caseTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'AddEvidenceDlg',
  components: { ElDragSelect, Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return caseTypeKeyValue[type]
    },
    timeFilter(t) {
      return moment(t).format('YYYY-MM-DD HH:MM:SS')
    }
  },
  props: {
    isShowDlg: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      listLoading: true,
      caselist: [],
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10,
        title: undefined,
        type: undefined,
        creator: '测试员1',
        sortField: 'createTime',
        sortRules: -1
      },
      textMap: {
        update: '编辑案件',
        create: '新建案件'
      },
      inquisitorValue: ['李寻欢', '叶开', '叮当', '傅红雪'],
      inquisitors: [
        { value: '李寻欢', label: '李寻欢' },
        { value: '叶开', label: '叶开' },
        { value: '叮当', label: '叮当' },
        { value: '傅红雪', label: '傅红雪' }
      ],

      caseTypeOptions,
      // temp: {
      //   description: '',
      //   createTime: moment().format('YYYY-MM-DD HH:MM:SS'),
      //   caseName: '',
      //   caseNo: moment().format('YYYYMMDDHHMMSS'),
      //   caseType: '电子商务',
      //   status: 'published'
      // },
      showDlg: this.isShowDlg,
      rules: {
        caseName: [{ required: true, message: '请输入案件名', trigger: 'blur' }],
        caseNo: [{ required: true, message: '请输入案件编号', trigger: 'blur' }],
        caseType: [{ type: 'string', required: true, message: '请选择案件类型', trigger: 'change' }],
        createTime: [{ type: 'string', required: true, message: 'timestamp is required', trigger: 'change' }]
      }
    }
  },
  watch: {
    isShowDlg(val) {
      this.showDlg = val
      console.log('isShowDlg:', this.isShowDlg)
    },
    showDlg(val) {
      this.$emit('on-result-change', val)
      // this.hasAddCase = false
      console.log('showDlg:', val)
    }
  },
  created() {
    this.getCaseList()
  },
  methods: {
    getCaseList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.caselist = response.data.list
        this.total = response.data.total
        this.listQuery.page = response.data.page
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getCaseList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'createTime') {
        this.sortByCreateTime(order)
      }
    }
  }
}
</script>
